<template>
  <div class="reg">
    <header>
      <div class="top" @click="$router.go(-1)"></div>
      <span class="tex_1">注册</span>
    </header>

    <main>
      <van-cell-group>
        <van-field
          v-model="phone"
          placeholder="请输入手机号"
          left-icon="https://lanhu.oss-cn-beijing.aliyuncs.com/ps07565bremrm6pe9cw0iqhikfr4rnadgcma0f9ce5c-b568-4ecf-b52f-1f8e35457240"
        />
      </van-cell-group>

      <van-field
        v-model="sms"
        center
        clearable
        placeholder="请输入短信验证码"
        left-icon="https://lanhu.oss-cn-beijing.aliyuncs.com/pszuyg2fnmaziw6dxm4i6alovllpilq935f2d59b5-1c46-4022-813f-b08a7d90feb4"
      >
        <template #button>
          <van-button size="small" type="primary" @click="setCode"
            >发送验证码</van-button
          >
        </template>
      </van-field>

      <van-cell-group>
        <van-field
          v-model="phone1"
          placeholder="6到25字符组成的密码"
          left-icon="https://lanhu.oss-cn-beijing.aliyuncs.com/psw18qal9lxj0jru4zfq27i5r9atvd7vzake813a7bb-382f-436c-b8b4-daf81bba3da0"
          right-icon="https://lanhu.oss-cn-beijing.aliyuncs.com/ps7f8aj0d5tigf05hz2xjrnfbhanxa28k9cf3fb203c-e1c4-4df8-85a0-38f624c9ed6b"
        />
      </van-cell-group>

      <button class="denglu" @click="btnReg">注册</button>

      <div class="agree1">
        <van-checkbox
          v-model="checked"
          checked-color="#f7405f"
          shape="square"
          icon-size="14px"
        ></van-checkbox>
        <div class="text">
          <span class="text1">我同意并愿意遵守</span>
          <span class="text2">《美悦隐私政策》《美悦用户使用协议》</span>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import { RegisterAPI, SendCodeAPI } from "../../utils/requestAPI";
export default {
  data() {
    return {
      phone: "",
      sms: "",
      checked: false,
      active: 2,
      phone1: "",
    };
  },

  methods: {
    // 验证手机号
    checkPhone(phone) {
      let reg = /^1[3|4|5|7|8][0-9]{9}$/;
      return reg.test(phone);
    },

    // 验证密码
    checkPassword(password) {
      let reg = /^(?![d]+$)(?![a-zA-Z]+$)(?![^da-zA-Z]+$).{6,20}$/;
      return reg.test(password);
    },

    // 注册
    async btnReg() {
      if (this.checked) {
        if (this.checkPhone(this.phone)) {
          if (this.checkPassword(this.phone1)) {
            // alert("验证成功")
            // 用户注册请求
            await RegisterAPI({
              code: this.sms,
              password: this.phone1,
              userPhone: this.phone,
            }).then((res) => {
              console.log(res);
            });
            Toast("注册成功！");
            this.$router.push("/Phone");
          } else {
            Toast("请检查您的密码！");
          }
        } else {
          Toast("请检查您的手机号！");
        }
      } else {
        Toast("请先勾选我同意！");
      }
    },

    // 点击验证码
    async setCode() {
      // 验证码请求
      await SendCodeAPI({ userPhone: this.phone }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.reg {
  display: flex;
  flex-direction: column;

  header {
    width: 100%;
    height: 90px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    border-bottom: 1px #bbb solid;

    .top {
      width: 19px;
      height: 35px;
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psfzkjgsrtz3oieijnyyjehngzz3nugwa7w2438a8bb-693e-4558-a4b4-f50f8ddc651b) -1px -1px
        no-repeat;
      background-size: 20px 37px;
      margin-left: 50px;
    }

    .tex_1 {
      color: rgba(112, 112, 112, 1);
      font-size: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 600;
      margin-left: 249px;
    }
  }

  main {
    width: 100%;
    height: 72px;
    .denglu {
      display: block;
      margin: 20px auto;
      background-color: rgba(247, 64, 95, 0.2);
      border-radius: 10px;
      height: 82px;
      width: 80%;
      color: rgba(254, 254, 254, 1);
      font-size: 30px;
      font-family: PingFangSC-Regular;
      text-align: center;
      border: 1px rgb(112, 107, 107) solid;
    }

    .agree1 {
      width: 80%;
      margin: 20px auto;
      display: flex;
      align-items: center;
      .text {
        width: 560px;
        height: 22px;
        font-size: 0;
        font-family: PingFangSC-Regular;
        white-space: nowrap;
        margin-top: -1px;
      }
      .text1 {
        color: rgba(153, 153, 153, 1);
        font-size: 22px;
      }

      .text2 {
        color: rgba(247, 64, 95, 1);
        font-size: 22px;
      }
    }
  }

  .van-cell {
    border: 1px #bbb solid;
    margin: 20px auto;
    width: 80%;
    border-radius: 10px;
    height: 40px;
  }

  .van-button--primary {
    background-color: #fff;
    color: #bbb;
    border: 1px #bbb solid;
    border-radius: 10px;
  }
}
</style>
